<template>
  <div class="transfer">
    <!--    <div class="flex between baselight2 ptb20 plr20 ft16 bgheader">-->
    <!--      <span>copy</span>-->
    <!--      <a-->
    <!--          class="blue"-->
    <!--          href="#/assets/transferLog?currency_id=1&amp;currency_code=USDT"-->
    <!--      >-->
    <!--        transfer record-->
    <!--      </a>-->
    <!--    </div>-->
    <div class="plr20 pt20 pb50 cointransfer">
      <a-form-model
          ref="ruleForm"
          :label-col="labelCol"
          :model="form"
          :rules="rules"
          :wrapper-col="wrapperCol"
          class="theme-white"
      >
        <a-form-model-item :label="$t('transfer currency')">
          <!--          <CoinSelect v-model="form.code" />-->
          <a-input v-model="form.name" :disabled="true" style="background-color: #0B0E11; color: #fff"/>
        </a-form-model-item>
        <a-form-model-item :label="$t('transfer account')">
          <div class="flex alcenter">
            <div class="pr10 ft12">{{ $t('from') }}</div>
            <AccountSelect v-model="form.toType" @change="accountSelectChange"/>
            <div class="tc plr20" @click="transformHandler">
              <img
                  alt=""
                  class="wt40 ht40"
                  src=""
              />
            </div>
            <div class="pr10 ft12">{{$t('to')}}</div>
            <AccountSelect v-model="form.type" disabled @change="accountSelectChange"/>
          </div>
          <div>{{ $t('Balance') }}: {{ account }}</div>
        </a-form-model-item>
        <a-form-model-item :label="$t('transfer amount')">
          <a-input v-model="form.amount" style="background-color: #0B0E11; color: #fff" suffix="MAX" type="number"/>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 3 }">
          <a-button :loading="submitLoading" block type="primary" @click="onSubmit">
            {{ $t('Ok') }}
          </a-button>
        </a-form-model-item>
      </a-form-model>

      <!--      <div class="flex mt60 btn">-->
      <!--        <div class="wt80"></div>-->
      <!--        <div class="bgblue lh48 ht48 tc white ft16 radius4 wt217">OK</div>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script>
import AccountSelect from "@/components/AccountSelect.vue";
import {getAssetsTransfer, fetchAccount} from "@/api/asset";
import accountSelect from "@/components/AccountSelect.vue";

export default {
  computed: {
    accountSelect() {
      return accountSelect
    }
  },
  components: {AccountSelect},
  data() {
    return {
      labelCol: {span: 3},
      wrapperCol: {span: 14},
      amount: 0.00,
      form: {
        name: 'USDT',
        type: '',
        toType: ''
        // amount:
      },
      rules: {
        name: [{required: true, message: this.$t("请选择币种"), trigger: "change"}],
        amount: [
          {required: true, message: this.$t("please enter the num"), trigger: "blur"},
        ],
      },
      submitLoading: false,
      account: 0
    };
  },
  methods: {
    transformHandler(){
      let newType = this.form.toType
      this.form.toType = this.form.type
      this.form.type = newType
      this.getAccount({type: this.form.type, name: this.form.name})
    },
    refresh() {
    },
    accountSelectChange(record) {
      if (record) {
        this.form.type = record.option[record.index == 1 ? 0 : 1].name
        const {type, name} = this.form
        this.getAccount({type, name})
      }
    },
    getAccount(data) {
      fetchAccount(data).then(res => {
        this.account = res.data
      })
    },
    onSubmit() {
      console.log(this.form)
      this.submitLoading = true
      getAssetsTransfer(this.form).then(() => {
        this.submitLoading = false
        this.$Success()
        this.refresh()//怎样局部刷新我不会，资产要刷新
      }).catch(() => {
        this.submitLoading = false
      })
    }
  },
  mounted() {
  },
};
</script>

<style lang="scss" scoped>
::v-deep.ant-input {
  color: #fff
}

</style>
